<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 12列网格布局在设计系统和CSS Framework中经常使用，
    比如业内经典的Bootstrap就采用了12列网格布局系统： -->


    <!-- flex布局末尾个数不一致的时候；可以使用gap ；but只是在firfox支持-->
    <!-- body {
        padding: 1vh;
    }
    
    .flex__container {
        display: flex;
        flex-wrap: wrap;
        gap: 2vh;
    
        width: 100%;
    }
    
    .flex__item {
        flex: 0 1 calc((100vw - 8vh) / 4);
    } -->

    <!-- 在Css Grid布局中，就可以直接使用gap：
    body {
        padding: 1vh;
    }
    
    .grid__container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1vh;
    } -->
</body>
</html>